<template>
  <el-table
    ref="ElTable"
    :data="data"
    :size="size"
    :border="option.border"
    :height="option.height || '500px'"
    highlight-current-row
    :row-class-name="tableRowClassName"
    @setCurrentRow="setCurrentRow"
    @selection-change="selectionChange"
    @row-click="rowClick"
    @cell-click="cellClick"
    @row-dblclick="rowDblClick"
    :show-header="option.showHeader"
    :cell-style="cellStyle"
    :header-cell-style="headerCellStyle"
    v-bind="$attrs"
    v-on="$listeners"
    :key="itemkey"
  >
    <!-- 无数据 -->
    <template slot="empty">
      <div class="noData">
        <img src="../../../../assets/img/zwnr.png" alt />
        <div class="label">{{ "暂无内容" }}</div>
      </div>
    </template>

    <!-- 选择框 -->
    <el-table-column
      v-if="option.selection"
      type="selection"
      width="55"
      :align="option.align || 'center'"
      :header-align="option.headerAlign || 'center'"
    ></el-table-column>

    <!-- 序号 -->
    <el-table-column
      v-if="option.index"
      width="55"
      :fixed="option.indexFixed || true"
      :align="option.align || 'center'"
      :header-align="option.headerAlign || 'center'"
      label="序号"
    >
      <template slot-scope="scope">
        <!-- <span>{{ scope.$index + 1 }}</span>  返回序号ndex值 启用连续分页-->
        <span>{{ getIndex(scope, 1) }}</span>
      </template>
    </el-table-column>

    <!-- 内容 -->
    <template v-for="(item, index) in column">
      <el-table-column
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :min-width="item.minWidth"
        :sortable="item.sortable"
        :fixed="item.fixed"
        :align="item.align || option.align || 'center'"
        :header-align="item.align || option.headerAlign || 'center'"
        :show-overflow-tooltip="true"
        :formatter="item.formatter"
      >
        <!-- 自定义插槽 -->
        <span slot-scope="scope">
          <!--
            @slot 自定义列插槽,插槽名称为对应列的prop。
            @binding {String} name - 插槽名称
            @binding {Object} row - 该条数据对象
          -->
          <slot v-if="item.slot" :name="item.prop" :row="scope.row"></slot>
          <span v-else>{{ handleDetail(scope.row, item) }}</span>
        </span>
      </el-table-column>
    </template>

    <!-- 操作栏 -->
    <el-table-column
      label="操作"
      align="center"
      :width="option.menuWidth || 200"
      :fixed="option.menuFixed"
      v-if="option.menu"
    >
      <template slot-scope="scope">
        <!-- 
          @slot 操作列自定义按钮左
          @binding {Object} row - 该条数据对象
          @binding {Number} index - 该条数据对象下标
           
          删除 修改按钮的 显示/隐藏 传false/true,
         -->
        <slot
          name="menuLeft"
          :row="scope.row"
          :index="getIndex(scope, 0)"
        ></slot>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
          v-if="!option.editBtn"
          >修改</el-button
        >
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
          v-if="!option.delBtn"
          >删除</el-button
        >
        <!-- 
          @slot 操作列自定义按钮右
          @binding {Object} row - 该条数据对象
          @binding {Number} index - 该条数据对象下标
         -->
        <slot
          name="menuRight"
          :row="scope.row"
          :index="getIndex(scope, 0)"
        ></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
/**
 * 对element-ui表格组件进行二次封装，通过JSON格式的配置实现表单
 */
export default {
  name: "OceTable",
  data() {
    return {
      size: "mini",
      cellStyle: {
        height: "",
        padding: "3px 0",
      },

      headerCellStyle: {
        background: "#FAFAFA",
        color: "#000000D9",
        fontSize: "14px !important",
        fontFamily:
          "Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;",
      },
      itemkey: Math.random(),
    };
  },
  props: {
    /**
     * 表格数据
     */
    data: {
      type: Array,
    },
    /**
     * 组件配置属性，详情见下面Option属性
     */
    option: {
      type: Object,
    },
    /**
     * 列配置，详情见下面Column属性
     */
    column: {
      type: Array,
    },
    //当前分页对象 包含 页码数和分页数
    page: {
      type: Object,
      default: function() {
        return {
          pageSize: 10,
          currentPage: 1,
        };
      },
    },
    continuousIndex: {
      type: Boolean,
      default: false,
    },
    menu: {
      type: Boolean,
      default: false,
    },
    // //设置行样式
    tableRowClassName: {
      type: Function,
      default: function() {
        return "normal-row";
      },
    },
  },
  mounted() {},
  methods: {
    refresh() {
      this.itemkey = Math.random();
    },
    // 修改
    handleUpdate(row) {
      /**
       * 修改数据
       * @property {Object} row - 对应数据对象
       */
      this.$emit("handleUpdate", row);
    },
    // 删除
    handleDelete(row) {
      /**
       * 删除数据
       * @property {Object} row - 对应数据对象
       */
      this.$emit("handleDelete", row);
    },
    rowClick(row) {
      /**
       * 点击行
       * @property {Object} row - 对应数据对象
       */
      this.$emit("handleRowClick", row);
    },
    cellClick(row, value) {
      /**
       * 点击单元格
       * @property {Object} value - 对应数据对象
       */
      this.$emit("handleCellClick", { row, value });
    },
    /**
     * 行双击
     * @property {Object} row - 对应数据对象
     */
    rowDblClick(row, column, event) {
      this.$emit("HandleRowDblClick", row, column,event);
    },
    //设置滚动到当前
    setCurrentRow(row) {
      this.$emit("setCurrentRow", row);
    },
    // 全选
    toggleAllSelection() {
      this.$refs.ElTable.toggleAllSelection();
    },
    // 选项发送变化
    selectionChange(val) {
      /**
       * 多选项发送变化
       * @property {Array} val - 变化后选中内容列表
       */
      this.$emit("selection-change", val);
    },
    // 表格内容处理
    handleDetail(row, column) {
      if (["radio", "select"].includes(column.type)) {
        // console.log(row[column.prop],column.dicData,this.findByValue(row[column.prop],column.dicData))
        return this.findByValue(row[column.prop], column.dicData, column.props);
      } else {
        return row[column.prop];
      }
    },
    // 根据字典的value显示label
    findByValue(value, dic, props) {
      if (!dic || dic.length < 1) return "";
      let valueKey = props ? props.value || "value" : "value";
      let labelKey = props ? props.label || "label" : "label";
      if (dic.length > 599) console.log(valueKey, labelKey);
      let val = dic.filter((item) => item[valueKey] == value)[0];
      // console.log(val,value)
      if (val == 0) return val[labelKey];

      return val ? val[labelKey] : "";
    },

    //返回表格行序号
    getIndex(scope, type) {
      if (this.continuousIndex) {
        return (
          (this.page.currentPage - 1) * this.page.pageSize + scope.$index + type
        );
      } else {
        return scope.$index + type;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__empty-block {
  overflow: auto;
}
.noData {
  img {
    // height: 70%;
    width: 40%;
  }
  .label {
    font-size: 30px;
    transform: translate(0, -40px);
  }
}
</style>
